<!-- 领料单 -->
<template>
  <div class="pickingList-pack">
    <el-carousel :interval="5000" :autoplay="false" arrow="hover" height="120px" trigger="click" indicator-position="none" class="top" ref="toggle">
      <el-carousel-item v-for="(ite, i) in topList" :key="i">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, index) in ite" :key="index"
            ><div class="grid-content bg-purple" :class="item.active ? 'active' : ''">
              <el-card shadow="hover" class="card" @click.native="handerItem(item)">
                <div class="pack">
                  <div class="flex-j-sb">
                    <strong>{{ item.planCode }}</strong>
                    <p class="p1">{{ item.quantity }} {{ item.unit }}</p>
                  </div>

                  <p class="p1">
                    <span> {{ item.prodName }}</span
                    ><span class="small"> ({{ item.prodCode }})</span>
                  </p>
                  <p class="p1">
                    <span> {{ item.workshopName || '-' }}</span
                    ><span> -{{ item.lineName || '-' }}</span>
                  </p>

                  <div class="number">{{ i * 3 + index + 1 }}</div>
                </div>
              </el-card>
            </div></el-col
          >
        </el-row>
      </el-carousel-item>
    </el-carousel>

    <div class="content">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" :inline="true" class="form" :show-message="false">
        <div class="flex-j-sb top-btn">
          <el-form-item label="">
            <el-input prefix-icon="el-icon-search" :placeholder="$i18n.t('pickingList.pleaseEnterTheMaterialName')" v-model="ruleForm.prod"></el-input>
          </el-form-item>
          <div>
            <el-select
              class="m-r-10"
              v-model="ruleForm.warehouseCode"
              :placeholder="$i18n.t('pickingList.pleaseSelectTheWarehouseUniformReplacement')"
              @change="
                (val) => {
                  workshopSelect(val)
                }
              "
              filterable
            >
              <el-option v-for="item in workshopList" :key="item.modelingCode" :label="item.modelingName" :value="item.modelingCode"> </el-option>
            </el-select>

            <el-button type="warning" icon="el-icon-refresh-right" @click="resetThisPick()" :disabled="!(ruleForm.mesRequisitionBillList && ruleForm.mesRequisitionBillList.length)">{{
              $i18n.t('pickingList.receiveThisTimeToZero')
            }}</el-button>
            <el-button type="primary" @click="$refs.editTable.show()" icon="el-icon-circle-plus-outline" plain>{{ $i18n.t('pickingList.addMaterial') }}</el-button>
          </div>
        </div>
        <el-table
          v-loading="tableLoading"
          class="table-pack"
          :data="(ruleForm.mesRequisitionBillList || []).filter((data) => !ruleForm.prod || data.materialName.toLowerCase().includes(ruleForm.prod.toLowerCase()))"
          border
          height="calc(100vh - 410px)"
        >
          <el-table-column v-for="(ite, i) in column" :key="i" align="center" :prop="ite.prop" :label="ite.label" :fixed="ite.fixed || null" :width="ite.width || ''"> </el-table-column>
          <!-- 车间 -->
          <el-table-column :label="$i18n.t('pickingList.warehouse')" width="160" fixed="right" :render-header="addRedStar" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'mesRequisitionBillList.' + scope.$index + '.warehouseCode'" :rules="rules.warehouseCode">
                <el-select
                  v-model="scope.row.warehouseCode"
                  :placeholder="$i18n.t('pickingList.pleaseSelectTheWarehouse')"
                  @change="
                    (val) => {
                      workshopSelect(val, scope.row, 1)
                    }
                  "
                  filterable
                >
                  <el-option v-for="item in workshopList" :key="item.modelingCode" :label="item.modelingName" :value="item.modelingCode"> </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column :label="$i18n.t('pickingList.thisTime')" align="center" width="160" fixed="right" :render-header="addRedStar">
            <template slot-scope="scope">
              <el-form-item :prop="'mesRequisitionBillList.' + scope.$index + '.thisPick'" :rules="rules.thisPick">
                <el-input-number controls-position="right" :min="0" v-model="scope.row.thisPick" :precision="4"></el-input-number
              ></el-form-item>
            </template>
          </el-table-column>

          <!-- 车间 -->
          <el-table-column :label="$i18n.t('pickingList.returnWorkshop')" width="160" align="center" fixed="right">
            <template slot-scope="scope">
              <el-select v-model="scope.row.returnWorkshopCode" :placeholder="$i18n.t('pickingList.pleaseSelectWorkshop')" @change="(val) => changeReturnWorkWorkshopCode(val, scope.row)" filterable>
                <el-option v-for="item in workshopCodeList" :key="item.modelingCode" :label="item.modelingName" :value="item.modelingCode"> </el-option>
              </el-select>
            </template>
          </el-table-column>

          <!-- 工位 -->
          <el-table-column :label="$i18n.t('pickingList.returnWorkCellName')" width="160" align="center" fixed="right">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.returnWorkCellCode"
                :placeholder="$i18n.t('pickingList.pleaseSelectDeliveryStation')"
                @change="(val) => changeReturnWorkCellCode(val, scope.row)"
                filterable
              >
                <el-option v-for="item in scope.row.workCellList" :key="item.modelingCode" :label="item.modelingName" :value="item.modelingCode"> </el-option>
              </el-select>
            </template>
          </el-table-column>
          <!-- 时间 -->
          <el-table-column :label="$i18n.t('pickingList.theLatestDeliveryTime')" width="200" align="center" fixed="right" :render-header="addRedStar">
            <template slot-scope="scope">
              <el-form-item label="" :prop="'mesRequisitionBillList.' + scope.$index + '.latestGetDate'" :rules="rules.latestGetDate">
                <el-date-picker
                  v-model="scope.row.latestGetDate"
                  type="datetime"
                  :placeholder="$i18n.t('pickingList.selectTheLatestDeliveryDate')"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :pickerOptions="{
                    disabledDate: (time) => time.getTime() < new Date(new Date().setHours(0, 0, 0, 0))
                  }"
                >
                </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 时间 -->
          <!-- <el-table-column
            label="最晚领料时间"
            width="200"
            align="center"
            fixed="right"
            :render-header="addRedStar"
          >
            <template slot-scope="scope">
              <el-form-item
                label=""
                :prop="
                  'mesRequisitionBillList.' + scope.$index + '.latestGetDate'
                "
                :rules="rules.latestGetDate"
              >
                <el-date-picker
                  v-model="scope.row.latestGetDate"
                  type="datetime"
                  placeholder="选择最晚领料日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :pickerOptions="{
                    disabledDate: (time) =>
                      time.getTime() <
                      new Date(new Date().setHours(0, 0, 0, 0)),
                  }"
                >
                </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column> -->

          <el-table-column :label="$i18n.t('common.operation')" width="50" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button v-if="scope.row.isEdit" type="text" style="color: #e63838;" @click="handleDelRow(scope.$index)">{{ $i18n.t('pickingList.delete') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>

    <div class="flex-ac no-print">
      <div class="flex-ac">
        <el-button @click="handleClose">{{ $i18n.t('common.cancel') }}</el-button>
        <el-button type="primary" @click="handleSubmit">{{ $i18n.t('pickingList.getOffer') }}</el-button>
      </div>
      <div class="flex-ac">
        <div class="flex-ac ml-20">
          <div class="chunk_flag"></div>
          <div class="font-14">
            {{ $i18n.t('pickingList.common') }}

            <span class="color-ff4656">{{ count5 }}</span>
            {{ $i18n.t('pickingList.msg2') }}

            <span class="color-ff4656">{{ count4 }}</span>
          </div>
        </div>
        <div class="flex-ac ml-20">
          <div class="chunk_flag"></div>
          <div class="font-14">
            {{ $i18n.t('pickingList.involve') }}

            <span class="color-ff4656">{{ count3 }}</span>

            {{ $i18n.t('pickingList.msg3') }}
            <span class="color-ff4656"> {{ count2 }} </span>
          </div>
        </div>
        <div class="flex-ac ml-20">
          <div class="chunk_flag"></div>
          <div class="font-14">
            <span class="color-ff4656">{{ count1 }}</span>
            {{ $i18n.t('pickingList.terminationList') }}
          </div>
        </div>
      </div>
    </div>
    <editTable ref="editTable" @getSelectCode="getSelectCode"></editTable>
    <el-dialog :title="$i18n.t('pickingList.tit1')" :visible.sync="submitVisible" width="65%" class="over-pick" :before-close="() => (submitVisible = false)">
      <div>
        <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
          <el-form-item :label="$i18n.t('pickingList.overPickReason')" prop="overPickReason" :rules="[{ required: true, message: $i18n.t('pickingList.msg4') }]">
            <el-select v-model="numberValidateForm.overPickReason">
              <el-option v-for="item in overReasonList" :key="item.value" :label="item.description" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$i18n.t('pickingList.overPickReason')" prop="overCollectionReason">
            <el-input type="textarea" v-model="numberValidateForm.overCollectionReason"> </el-input>
          </el-form-item>
        </el-form>

        <el-table :data="excessTableData" style="width: 100%;" height="450">
          <el-table-column type="index" align="center" width="50" label="序号"> </el-table-column>
          <el-table-column prop="planCode" align="center" label="$i18n.t('common.order')" show-overflow-tooltip width="180"> </el-table-column>
          <el-table-column prop="materialCode" align="center" label="$i18n.t('pickingList.materialCode')" show-overflow-tooltip width="180"> </el-table-column>
          <el-table-column prop="materialName" width="180" show-overflow-tooltip align="center" label="$i18n.t('pickingList.materialName')"> </el-table-column>
          <el-table-column prop="returnWorkCellName" align="center" label="$i18n.t('pickingList.returnWorkCellName')" show-overflow-tooltip width="180"> </el-table-column>
          <el-table-column prop="unReceiveQty" align="center" label="$i18n.t('pickingList.quantity')" show-overflow-tooltip width="90" fixed="right"> </el-table-column>
          <el-table-column prop="thisPick" align="center" fixed="right" label="$i18n.t('pickingList.listingQuantity')" show-overflow-tooltip width="110"> </el-table-column>
          <el-table-column fixed="right" prop="overPickNum" align="center" show-overflow-tooltip label="$i18n.t('pickingList.overPickNum')" width="90"> </el-table-column>
        </el-table>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="() => (submitVisible = false)">{{ $i18n.t('pickingList.returnToModify') }}</el-button>
        <el-button type="primary" @click="overCollectionSubmit">{{ $i18n.t('pickingList.confirmAndSubmit') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { uniqueKey } from "@/utils/judge.js";
import editTable from './components/selectTableMeet.vue'
import { getDict } from '@/api/common.js'
//例如：import 《组件名称》 from '《组件路径》';
import { getPickMaterials, getWareStock, getWareList, saveMaterialList, getLineCodeListNew as getReturnWorkshopCodeList } from '@/api/order/mesProdOrder.js'
export default {
  name: 'pickingList',
  //import引入的组件需要注入到对象中才能使用
  components: { editTable },
  data() {
    //这里存放数据
    return {
      loading: false,
      tableLoading: false,
      submitVisible: false, //超领弹窗
      numberValidateForm: {
        overCollectionReason: '',
        overPickReason: ''
      }, //超领的表单
      overReasonList: [], //超领原因option
      excessTableData: [], //超额table
      topList: [],
      workshopList: [], //仓库列表
      workshopCodeList: [], //车间列表
      ruleForm: {
        tableData: [],
        prod: '', //上方筛选条件
        warehouseCode: '' //选择仓库
      },
      countObj: {}, //数量统计
      rules: {
        thisPick: [{ required: true, message: $i18n.t('pickingList.requiredForCurrentIssue'), trigger: 'blur' }],
        latestGetDate: [{ required: true, message: $i18n.t('pickingList.latestDeliveryDateRequired'), trigger: 'blur' }],
        // latestGetDate: [{ required: true, message: $i18n.t('pickingList.msg7'), trigger: 'blur' }],
        warehouseCode: [{ required: true, message: $i18n.t('pickingList.warehouseRequired'), trigger: 'blur' }]
      },
      column: [
        {
          label: $i18n.t('pickingList.goodsCode'), // '物料编码',
          prop: 'materialCode',
          width: 180
        },
        {
          label: $i18n.t('pickingList.goodsName'), //'物料名称',
          prop: 'materialName',
          width: 180
        },
        {
          label: $i18n.t('pickingList.unit'), // '单位',
          prop: 'unit',
          width: 80
        },
        {
          label: $i18n.t('pickingList.singleNumber'), //'单台用量',
          prop: 'singleQty'
        },
        {
          label: $i18n.t('pickingList.needNumber'), //'标准用料',
          prop: 'needQty'
        },
        {
          label: $i18n.t('pickingList.lossNum'), //'损耗用料',
          prop: 'lossQty'
        },
        // {
        //   label: "合计需要料",
        //   prop: "needQty",
        // },
        {
          label: $i18n.t('pickingList.receiveNumber'), //'已领',
          prop: 'receiveQty'
        },
        {
          label: $i18n.t('pickingList.pickQty'), // '领料中',
          prop: 'pickQty'
        },
        {
          label: $i18n.t('pickingList.unReceiveNumber'), //'未领',
          prop: 'unReceiveQty'
        },
        {
          label: $i18n.t('pickingList.inventory'), //'库存',
          prop: 'inventory'
        }
      ]
    }
  },
  //监听属性 类似于data概念
  computed: {
    // 领料单数量
    count1() {
      let sum = 0
      this.topList.map((ite) => {
        sum += (ite || []).length
      })

      return sum
    },
    // 产品数量
    count2() {
      let sum = 0
      this.topList.map((ite) => {
        ;(ite || []).map((item) => {
          sum += Number(item.quantity)
        })
      })
      return sum
    }, // 产品数量
    count3() {
      let set = new Set()
      this.topList.map((ite) => {
        ;(ite || []).map((item) => {
          set.add(item.prodCode)
        })
      })
      return set.size
    },
    // 本次领料总数
    count4() {
      let sum = 0
      this.topList.map((ite) => {
        ;(ite || []).map((item) => {
          ;(item.mesRequisitionBillList || []).map((items) => {
            sum += Number(items.thisPick || 0)
          })
        })
      })
      return sum
    },
    // 本次领料总数
    count5() {
      let sum = 0
      this.topList.map((ite) => {
        ;(ite || []).map((item) => {
          ;(item.mesRequisitionBillList || []).map((items) => {
            if (items.thisPick > 0) {
              sum += 1
            }
          })
        })
      })
      return sum
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async init() {
      let { ids } = this.$route.query
      if (ids) {
        try {
          this.loading = true
          let res = await getPickMaterials(ids)
          let { result } = res.data
          let newList = []
          for (var i = 0; i < result.length; i += 3) {
            newList.push(result.slice(i, i + 3))
          }

          this.topList = newList
          result[0].active = true
          this.ruleForm = result[0]
        } finally {
          this.loading = false
        }
      } else {
        this.$message.error($i18n.t('pickingList.msg1'))
      }
    },

    //移除一行容量数据
    handleDelRow(idx) {
      this.$nextTick(() => {
        this.ruleForm.mesRequisitionBillList.splice(idx, 1)
      })
    },

    // 上方点击切换
    handerItem(data) {
      ;(this.topList || []).map((ite) => {
        ite.map((item) => {
          this.$set(item, 'active', false)
        })
      })
      this.$set(data, 'active', true)
      this.tableLoading = true
      setTimeout(() => {
        this.tableLoading = false
      }, 500)
      this.ruleForm = data
    },
    // 下发领料
    handleSubmit() {
      if (!this.count4) {
        this.$message.warning($i18n.t('pickingList.msg9'))
        return
}
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!this.checksubmitData()) {
            return
          }

          let tableList = []

          //统计全卡片超额数量
          this.topList.map((ite) => {
            ;(ite || []).map((item) => {
              ;(item.mesRequisitionBillList || []).map((items) => {
                if (Number(items.unReceiveQty || 0) < Number(items.thisPick || 0)) {
                  let { materialCode, materialName, modelingCode, returnWorkCellName, unReceiveQty, thisPick } = items
                  // 超领数量
                  let count = Number(thisPick || 0) - Number(unReceiveQty || 0)
                  this.$set(items, 'overPickNum', count)
                  tableList.push({
                    planCode: item.planCode,
                    materialCode,
                    materialName,
                    modelingCode,
                    returnWorkCellName,
                    unReceiveQty,
                    thisPick,
                    overPickNum: count
                  })
                } else {
                  this.$set(items, 'overPickNum', 0)
                }
              })
            })
          })
          // if (tableList.length) {
          //   this.submitVisible = true
          //   this.overReason()
          //   this.excessTableData = tableList
          // } else {
          this.excessTableData = []
          this.numberValidateForm = {
            overCollectionReason: '',
            overPickReason: ''
          }
          this.submitSchedule()
          // }
        } else {
          this.$message.error($i18n.t('pickingList.pleaseCompleteInfo'))
          return false
        }
      })
    },
    // 封装提交领料单数据
    setSubmitData() {
      let data = []
      this.topList.map((ite) => {
        ;(ite || []).map((item) => {
          item.mesRequisitionBillList.map((a) => {
            ;(a.prodCode = item.prodCode), (a.prodName = item.prodName)
          }),
            data.push({
              planCode: item.planCode,
              ...this.numberValidateForm,
              mesRequisitionBillList: item.mesRequisitionBillList || []
            })
        })
      })
      return data
    },
    // 超领弹窗 提交
    overCollectionSubmit() {
      this.$refs.numberValidateForm.validate((valid) => {
        if (valid) {
          this.loading = true

          let res = saveMaterialList(this.setSubmitData())
            .then((res) => {
              this.$message.success($i18n.t('pickingList.createACollectionListSuccessfully'))
              this.goback()

              this.loading = false
            })
            .catch((error) => {
              this.loading = false
            })
        } else {
        }
      })
    },

    //封装统一 调用提交领料单接口
    submitSchedule() {
      this.loading = true
      let res = saveMaterialList(this.setSubmitData())
        .then((res) => {
          this.$message.success($i18n.t('pickingList.createACollectionListSuccessfully'))
          this.goback()

          this.loading = false
        })
        .catch((error) => {
          this.loading = false
        })
    },
    // tablet表头必填加*
    addRedStar(h, { column }) {
      return [h('span', { style: 'color: red' }, '*'), h('span', ' ' + column.label)]
    },

    // 重置领料归零
    resetThisPick() {
      ;(this.ruleForm.mesRequisitionBillList || []).map((ite) => {
        this.$set(ite, 'thisPick', 0)
      })
    },

    //选择车间
    changeReturnWorkWorkshopCode(val, row) {
      this.$nextTick(() => {
        //获得线体数据
        getReturnWorkshopCodeList({
          modelingCode: val,
          level: 6
        }).then((res) => {
          this.$set(row, 'workCellList', res.data.result)
        })
        let obj = this.workshopCodeList.find((ite) => ite.modelingCode == val)
        this.$set(row, 'returnWorkshopName', obj.modelingName)
        console.log(888, this.topList)
      })
    },
    changeReturnWorkCellCode(val, row) {
      this.$nextTick(() => {
        let obj = row.workCellList.find((ite) => ite.modelingCode == val)

        this.$set(row, 'returnWorkCellName', obj.modelingName)

        console.log(888, this.topList)
      })
    },
    // 选择物料
    getSelectCode(data) {
      data.map((ite) => {
        let { goodsCode, goodsName, unit, unitCode, seriesName, seriesCode } = ite

        // 判断有重复值
        if (this.ruleForm.mesRequisitionBillList.some((ite) => ite.materialCode == goodsCode)) {
        } else {
          let obj = {
            materialCode: goodsCode,
            materialName: goodsName,
            warehouseCode: this.ruleForm.warehouseCode || '',
            unit,
            unitCode,
            seriesName,
            seriesCode,
            singleQty: 0,
            needQty: 0,
            lossQty: 0,
            receiveQty: 0,
            pickQty: 0,
            unReceiveQty: 0,
            inventory: 0,
            thisPick: 0,
            modelingCode: null,
            returnWorkCellName: null,
            returnWorkCellCode: null,
            // lastReturnDate: null,
            latestGetDate: null,
            createType: '1',
            isEdit: true
          }
          this.ruleForm.mesRequisitionBillList.push(obj)
        }
      })
      if (this.ruleForm.warehouseCode) {
        this.workshopSelect(this.ruleForm.warehouseCode, this.ruleForm.mesRequisitionBillList[this.ruleForm.mesRequisitionBillList.length - 1], 1)
      }
    },
    // 根据仓库物料查询, 库存
    async workshopSelect(val, row, type) {
      try {
        // 下方有值才调用
        let { mesRequisitionBillList } = this.ruleForm
        if (mesRequisitionBillList && mesRequisitionBillList.length) {
          let res = await getWareStock({
            warehouseCode: val,
            goodsCodeList: type ? [row.materialCode] : (mesRequisitionBillList || []).map((val) => val.materialCode)
          })
          let { result } = res.data
          if (type) {
            this.$set(row, 'inventory', result[0]?.amount ?? 0)
            let obj = this.workshopList.find((ite) => ite.modelingCode == val)
            this.$set(row, 'warehouseName', obj.modelingName)
            this.$set(row, 'warehouseCode', obj.modelingCode)
          } else {
            result.map((ite, i) => {
              this.$set(this.ruleForm.mesRequisitionBillList[i], 'inventory', ite.amount)
              let obj = this.workshopList.find((ite) => ite.modelingCode == val)

              // 设置仓库名称
              this.$set(this.ruleForm.mesRequisitionBillList[i], 'warehouseName', obj.modelingName)
              this.$set(this.ruleForm.mesRequisitionBillList[i], 'warehouseCode', val)
            })
          }
        }
      } catch (error) {
        console.error('错误信息', error)
      }
    },
    //检查提交的必填项是否都已经输入
    checksubmitData() {
      let bool = true

      for (let j = 0; j < this.topList.length; j++) {
        let ite = this.topList[j]

        for (let k = 0; k < (ite || []).length; k++) {
          let item = ite[k]

          let data = item.mesRequisitionBillList || []
          let page = j * 3 + k + 1
          console.log(1111, k)
          if (data.length == 0) {
            this.$notify.error({
              title: $i18n.t('pickingList.tit2'),
              message: $i18n.t('pickingList.msg7', { page }) // `第${page}条生产工单,物料列表为空`
            })
            bool = false
            // 跳转到需要编辑的模块
            this.$nextTick(() => {
              this.$refs.toggle.setActiveItem(j)

              this.handerItem(item)
            })
            return
          }
          //&& data[i].latestGetDate
          //删除最晚领料时间的必填项,测试人员提出的优化点,   by bing
          for (let i = 0; i < data.length; i++) {
            if (typeof data[i].thisPick == 'number' && data[i].latestGetDate && data[i].warehouseCode) {
            } else {
              this.$notify.error({
                title: $i18n.t('pickingList.tit2'),
                message: $i18n.t('pickingList.msg5', { page })
              })
              bool = false
              // 跳转到需要编辑的模块
              this.$nextTick(() => {
                this.$refs.toggle.setActiveItem(j)

                this.handerItem(item)
              })

              return
            }
          }
        }
      }
      return bool
    },

    async overReason() {
      let res = await getDict('mes_materials_over_reason')
      this.overReasonList = res.data.result
    },
    //获取当前物料
    async getWorkshopList() {
      let res = await getWareList(this.$store.getters.factoryCode)
      this.workshopList = res.data.result
    },
    //获取当前物料
    async initWorkshopCodeList() {
      const params = {
        modelingCode: this.$store.getters.factoryCode,
        level: 4,
        modelingType: '0'
      }
      let res = await getReturnWorkshopCodeList(params)
      this.workshopCodeList = res.data.result
    },
    handleClose() {
      this.goback()
    },
    // 返回上一页,并且关闭当前页签
    goback() {
      const { name, path } = this.$route
      this.$store.commit('SET_DELETE', name)
      this.$store.commit('SET_DELTOPMENUS', { name, path })
      this.$router.back()
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getWorkshopList()
    this.init()
    this.initWorkshopCodeList()
  }
}
</script>
<style scoped lang="scss">
.pickingList-pack {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;

    .active {
      background: #dbeaff !important;
      .card {
        background-color: #4279e1 !important;
        border: 1px solid #1073ea !important;
        .pack {
          color: white !important;
          .small {
            color: #ccc6c6 !important;
          }
        }
        .number {
          background: #ffffff6b;
        }
      }
    }
    .card {
      height: 110px;
      cursor: pointer;
      position: relative;
      .number {
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: 20px;
        background: #e5e5e5;
        height: 20px;
        display: flex;
        justify-content: center;
        border-radius: 10px 0px 0px 0px;
        align-items: center;
      }
      /deep/.el-card__body {
        height: 100% !important;
      }
      .pack {
        color: #333;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;

        .p1 {
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          .small {
            color: rgb(153, 153, 153);
          }
        }
      }
    }
  }
  .content {
    margin-top: 18px;
    border: 1px solid #e5e5e5;
    border-bottom: 0px;
    padding-left: 10px;
    padding-right: 10px;
    .top-btn {
      margin-top: 18px;
    }
    .form {
      width: 100%;
      height: 100%;
    }
    .table-pack {
      /deep/.el-form-item {
        margin: 0;
      }
    }
  }

  .over-pick {
    /deep/.el-dialog__header {
      text-align: center;
      background: #ecc717;
    }
  }
  .no-print {
    background: #ffffff;
    padding: 16px 24px;
    border: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;

    display: flex;
    span {
      color: #ff4656;
    }
    .chunk_flag {
      width: 10px;
      height: 10px;
      background: #f4bb5b;
      border-radius: 2px;
      margin-right: 8px;
    }
  }
  .flex {
    display: flex;
  }

  .flex-j-sb {
    display: flex;
    justify-content: space-between;
  }
  .flex-ac {
    display: flex;
    align-items: center;
  }

  .m-r-10 {
    margin-right: 10px;
  }
}
</style>
